<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import { currentGET } from "@/api";
import { graphic } from "echarts/core";

const props = defineProps({
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
  chartOptions: {
    type: Object,
    default: () => {},
  },
  showAreaStyle: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: () => {
      return {
        dateList: ['第一季度', '第二季度', '第三季度', '第四季度'],
        oneList: [0, 0, 0, 0],
        twoList: [0, 0, 0, 0],
        threeList: [0, 0, 0, 0],
        fourList: [0, 0, 0, 0],
        fiveList: [0, 0, 0, 0]
      };
    },
  },
});

// const option = ref({});
let refreshInterval: ReturnType<typeof setInterval>; // 定时刷新

// 获取数据函数
// const getData = () => {
//   currentGET("line", {}).then((res) => {
//     console.log("报警次数 ", res);
//     if (res.success) {
//       setOption(res.data.dateList, res.data.numList, res.data.numList2);
//     } else {
//       window["$message"]({
//         text: res.msg,
//         type: "warning",
//       });
//     }
//   });
// };

// 设置图表配置项
// const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
  const option = computed(() => {
    return {
    xAxis: {
      type: "category",
      data: props.data.dateList,
      boundaryGap: false,
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    grid: {
      show: true,
      left: "10px",
      right: "30px",
      bottom: "10px",
      top: "32px",
      containLabel: true,
      borderColor: "#1F63A3",
    },
    series: [
      {
        data: props.data.oneList,
        type: "line",
        smooth: true,
        symbol: "none",
        name: "农业生产资料类",
        color: "rgba(252,144,16,.7)",
        areaStyle: {
          color: new graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "rgba(252,144,16,.7)" },
              { offset: 1, color: "rgba(252,144,16,.0)" },
            ],
            false
          ),
        },
        markPoint: {
          data: [
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "rect",
              symbolSize: [60, 26],
              symbolOffset: [0, -20],
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
              label: {
                show: false,
                color: "#FC9010",
                backgroundColor: "rgba(252,144,16,0.1)",
                borderRadius: 6,
                padding: [7, 14],
                borderWidth: 0.5,
                borderColor: "rgba(252,144,16,.5)",
                formatter: "农业生产资料类：{c}",
              },
            },
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "circle",
              symbolSize: 6,
              itemStyle: {
                color: "#FC9010",
                shadowColor: "#FC9010",
                shadowBlur: 8,
              },
              label: {
                formatter: "",
              },
            },
          ],
        },
      },
      {
        data: props.data.twoList,
        type: "line",
        smooth: true,
        symbol: "none",
        name: "农产品类",
        color: "rgba(9,202,243,.7)",
        areaStyle: {
          color: new graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "rgba(9,202,243,.7)" },
              { offset: 1, color: "rgba(9,202,243,.0)" },
            ],
            false
          ),
        },
      },
      {
        data: props.data.threeList,
        type: "line",
        smooth: true,
        symbol: "none",
        name: "日用消费品类",
        color: "rgba(9,65,46,.7)",
        areaStyle: {
          color: new graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "rgba(9,65,46,.7)" },
              { offset: 1, color: "rgba(9,65,46,.0)" },
            ],
            false
          ),
        },
      },
      {
        data: props.data.fourList,
        type: "line",
        smooth: true,
        symbol: "none",
        name: "再生资源类",
        color: "rgba(9,153,243,.7)",
        areaStyle: {
          color: new graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "rgba(9,153,243,.7)" },
              { offset: 1, color: "rgba(9,153,243,.0)" },
            ],
            false
          ),
        },
      },
      {
        data: props.data.fiveList,
        type: "line",
        smooth: true,
        symbol: "none",
        name: "其他类",
        color: "rgba(9,202,201,.7)",
        areaStyle: {
          color: new graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "rgba(9,202,201,.7)" },
              { offset: 1, color: "rgba(9,202,201,.0)" },
            ],
            false
          ),
        },
      },
    ],
  };
});
// };

// onMounted(() => {
//   // 初始化图表
//   getData(); // 获取初始数据
//   refreshInterval = setInterval(() => {
//     getData(); // 每5秒获取一次数据
//   }, 5000); // 每5秒刷新一次
// });

// onBeforeUnmount(() => {
//   // 在组件卸载时清除定时器
//   clearInterval(refreshInterval);
// });
</script>

<template>
  <v-chart
    v-if="JSON.stringify(option) !== '{}'"
    class="chart"
    :option="option"
    :style="{ width, height }"
  />
</template>

<style scoped lang="less"></style>
